<template>
    <div id="baseLayout">
        <div class="header">
            <van-nav-bar
            :title="title"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
            >
            <template #right>
                <van-icon name="search" />
            </template>
            </van-nav-bar>
        </div>
        <div class="content">
            <router-view/>
        </div>
        <div class="tabbar">
            <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item icon="home-o" name="index">主页</van-tabbar-item>
            <van-tabbar-item icon="friends-o" name="team">队伍</van-tabbar-item>
            <van-tabbar-item icon="contact-o" name="user">个人</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<style scoped>
#baseLayout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: white;
}
#baseLayout .header {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
#baseLayout .content {
    color: black;
    padding-bottom: 50px; /* 添加底部空白 */
    flex: 1; /* 确保 content 占据剩余空间 */
}
</style>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
import Myaxios from '../plugins/MyAxios';


const active = ref("index");
const router = useRouter();
const title = ref("伙伴匹配");

const onChange = ()=> {
    router.push({
        path: '/' + active.value
    })
};

const onClickLeft = () => history.back()
const onClickRight = ()=>{
    router.push({
        path:'/search'
    })
}

router.beforeEach((to, from, next) => {
    active.value = to.path.substring(1)
    title.value = to.meta?.title
    next()
})

</script>